/*
 * @Author: mikey.zhaopeng 
 * @Date: 2019-01-02 22:24:50 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2019-01-12 10:50:50
 */
import 'package:flutter/material.dart';
import '../../constants.dart' show AppColors;

//返回按钮
import '../../widgets/icon_widget/arrow_back.dart' show ArrowBack;

class SearchPage extends StatefulWidget {
  @override
  _StatePageState createState() => _StatePageState();
}

class _StatePageState extends State<SearchPage> {
  String searchVal;
  @override
  Widget build(BuildContext context) {
    Widget test = Container(
      padding: const EdgeInsets.all(8.0),
      alignment: Alignment.center,
      height: 40.0,
      decoration: new BoxDecoration(
          color: Colors.white,
          border: new Border.all(color: Color(0xffcccccc), width: 1.0),
          borderRadius: new BorderRadius.circular(5.0)),
      child: TextField(
        onChanged: (String val) {
          print(val);
          setState(() {
            searchVal = val;
          });
        },
        decoration: InputDecoration.collapsed(hintText: '搜索游戏'),
      ),
    );
    Widget _body = Container(
      color: Color(0xfff5f5f5),
      child: Column(
        children: <Widget>[
          Container(
            padding:
                const EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
            color: Colors.white,
            alignment: Alignment.centerLeft,
            child: Text(
              "热门搜索",
              style: TextStyle(
                  fontSize: 16.0,
                  color: Color(0xff555555),
                  fontWeight: FontWeight.bold),
            ),
          ),
          Container(
            color: Colors.white,
            padding: const EdgeInsets.fromLTRB(15, 0, 15.0, 15.0),
            margin: const EdgeInsets.only(bottom: 15),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                HotSearchItem(
                  path: 'assets/images/game1.png',
                  title: "青云九天",
                ),
                HotSearchItem(
                  path: 'assets/images/game2.png',
                  title: "超能特战队",
                ),
                HotSearchItem(
                  path: 'assets/images/game3.png',
                  title: "诸神逍遥",
                ),
                HotSearchItem(
                  path: 'assets/images/game4.png',
                  title: "新水浒",
                ),
              ],
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.white,
              child: Column(
                children: <Widget>[
                  Container(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 15, vertical: 15),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text(
                          '搜索记录',
                          style: TextStyle(
                            fontSize: 16,
                            color: Color(0xff555555),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            print('清除记录');
                          },
                          child: Text(
                            "清除记录",
                            style: TextStyle(
                              fontSize: 12,
                              color: Color(0xfffe5ba8),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 15.0),
                    alignment: Alignment.centerLeft,
                    child: Wrap(
                      alignment: WrapAlignment.start,
                      direction: Axis.horizontal,
                      children: <Widget>[
                        SearchHistory(title: "大战国"),
                        SearchHistory(title: "口袋妖怪新时代"),
                        SearchHistory(title: "大战国"),
                        SearchHistory(title: "青云九天"),
                        SearchHistory(title: "超能陆战队"),
                        SearchHistory(title: "大战国"),
                        SearchHistory(title: "大战国"),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
    double deviceHeight = MediaQuery.of(context).size.width -44;
    return Scaffold(
      appBar: AppBar(
        titleSpacing: 0,
        elevation: 0,
        backgroundColor: Color(AppColors.tabBgColor),
        title: test,
        actions: <Widget>[
          GestureDetector(
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 15.0),
              child: Icon(Icons.search),
            ),
          )
        ],
        leading: ArrowBack(),
      ),
      body: SingleChildScrollView(
        child: ConstrainedBox(
          constraints:BoxConstraints(
            minHeight: deviceHeight,
          ),
          child: Container(
            height: deviceHeight,
            child: _body,
          ),
        ),
      ),
    );
  }
}

class HotSearchItem extends StatelessWidget {
  final String path;
  final String title;

  HotSearchItem({Key key, @required this.path, @required this.title})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 76,
      child: Column(
        children: <Widget>[
          AspectRatio(
            aspectRatio: 1 / 1,
            child: Image.asset(path),
          ),
          SizedBox(
            height: 10,
          ),
          Text(title, style: TextStyle())
        ],
      ),
    );
  }
}

class SearchHistory extends StatelessWidget {
  final String title;
  SearchHistory({Key key, @required this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(right: 10, bottom: 10),
      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
      decoration: BoxDecoration(
        color: Color(0xffeeeeee),
        borderRadius: BorderRadius.all(
          Radius.circular(25.0),
        ),
      ),
      child: Text(
        title,
        style: TextStyle(fontSize: 14, color: Color(0xff555555)),
      ),
    );
  }
}
